<template>
  <div @click="$router.push({ path: '/xiaoshipin', query: { id: item.id }, })">
    <div class="img">
      <img :src="item.shareInfo.img" alt="" />
      <div class="title">
        <p>{{ item.title }}</p>
      </div>
      <div class="user">
        <div class="uimg">
          <img :src="item.user.avatarurl" alt="" />
        </div>
        <div class="uname">
          <p>{{ item.user.nickName }}</p>
        </div>
        <div class="zan">
          <span>
            <van-icon name="good-job" />
          </span>
          <span>{{ item.upCount }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
defineProps({
  item: {
    required: true,
  },
});
</script>

<style lang="scss" scoped>
.img {
  margin-top: 5rem;
  width: 185rem;
  height: 300rem;
  position: relative;
  img {
    width: 100%;
    height: 100%;
    display: block;
  }
  .title {
    width: 170rem;
    position: absolute;
    bottom: 45rem;
    left: 5rem;
    font-size: 16rem;
    color: white;
  }
  .user {
    position: absolute;
    bottom: 5rem;
    left: 5rem;
    display: flex;
    color: white;
    .uname{
      width: 28vw;
      line-height: 22rem;
      margin-left: 5rem;
    }
    .zan{
      line-height: 22rem;
      i{
        font-size: 18rem;
        margin-right: 5rem;
      }
    }
    .uimg{
      width: 22rem;
      height: 22rem;
      img{
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
  }
}
</style>
